<template>
    <div class="contain">
        <div class="main">
            <div v-if="styleLeft || styleAll" class="left">
                <slot name="left"></slot>
            </div>
            <div class="middle">
                <slot name="middle"></slot>
            </div>
            <div v-if="styleRight || styleAll" class="right">
                <slot name="right"></slot>
            </div>
        </div>
        <div class="footer">
            <slot name="footer"></slot>
        </div>
    </div>
</template>

<script setup lang="ts" name="Article">
import { ref, onMounted, defineProps, onBeforeUnmount } from 'vue'
let props = defineProps<{pageStyle: string}>();
let styleLeft = ref(props.pageStyle.match('left') ? true : false);
let styleRight = ref(props.pageStyle.match('right') ? true : false);
let styleMiddle = ref(props.pageStyle.match('middle') ? true : false);
let styleAll = ref(props.pageStyle.match('all') ? true : false);
const isHovered = ref(false)
const navPosY = ref(0)

onMounted(() => {
    init();
});

function init() {
    console.log(styleLeft, styleRight, styleMiddle, styleAll);
    if(props.pageStyle != 'all' && props.pageStyle != 'left' && props.pageStyle != 'right' && props.pageStyle != 'middle'){
        console.log('error');
    }
    if(props.pageStyle == ''){
        styleMiddle.value = true;
    }
}

const handleScroll = () => {
  let y = window.scrollY
  console.log(y > navPosY.value)
  if(y > navPosY.value){
    isHovered.value = false
  }else{
    isHovered.value = true
  }
  // console.log(navPosY.value)
  navPosY.value = y
}

onMounted(() => {
  window.addEventListener('scroll', handleScroll)
})

onBeforeUnmount(() => {
  window.removeEventListener('scroll', handleScroll)
})
</script>

<style scoped>
div {
    border: solid 1px #18191a;
}

.contain {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
}

.header {
    width: 100%;
    position: fixed;
    height: 50px;
    z-index: inherit;
}

.main {
    margin-top: 50px;
    position: absolute;
    width: 100%;
    height: 200vh;
    display: flex;
    flex-direction: row;
}
.left {
    width: 200px;
    height: 100%;
}
.middle {
    width: 100%;
    height: 100%;
}
.right {
    width: 200px;
    height: 100%;
}
</style>